import customTranslate from "@/components/activit/js/customTranslate/customTranslate";
import BpmnModeler from "bpmn-js/lib/Modeler";
import customControlsModule from "@/components/activit/js/customControls";
import activitiModdleDescriptor from "@/components/activit/js/activiti.json";
import bpmnHelper from "@/components/activit/js/helper/BpmnHelper";

export default {
    props: {
        bpmnXml: {
            type: String,
            default: "",
        },
    },
    computed: {
        bpmnEvents() {
            return {
                shape: {
                    "shape.added": this.eventShapeAdded,
                    "shape.move.end": this.eventShapeMoveEnd,
                    "shape.removed": this.eventShapeRemoved,
                },
                element: {
                    "element.click": this.eventElementClick,
                    "element.changed": this.eventElementChanged,
                    "selection.changed": this.eventElementSelectionChanged,
                }
            }
        }
    },
    mounted() {
        //初始化模型编辑器
        this.initBpmnModeler();
    },
    methods:{
        //初始化BpmnModeler
        initBpmnModeler() {
            let canvas = this.$refs.canvas;
            let customTranslateModule = {translate: ['value', customTranslate]};
            this.bpmnModeler = new BpmnModeler({
                container: canvas,
                //添加属性面板，添加翻译模块
                additionalModules: [
                    customTranslateModule,
                    customControlsModule
                ],
                //模块拓展，拓展activiti的描述
                moddleExtensions: {
                    activiti: activitiModdleDescriptor
                }
            });
            this.importBpmnXml()
        },
        importBpmnXml() {
            let bpmnXml = bpmnHelper.getBpmnTempate();
            if (this.bpmnModelerXml) {
                bpmnXml = this.bpmnModelerXml
            }
            this.loadBpmnXML(bpmnXml)
        },
        getShape(id) {
            let elementRegistry = this.bpmnModeler.get('elementRegistry')
            return elementRegistry.get(id)
        },
        loadBpmnXML(xml, modelConfig, nodeAssignees, nodeForms,activitKey) {
            this.bpmnModeler.importXML(xml, (err) => {
                if (err) {
                    console.log('bpmn文档导入失败',xml,err);
                    return
                }
                // 绑定监听事件
                this.loadBpmnXmlSuccess(modelConfig, nodeAssignees, nodeForms,activitKey);
                // 调控左侧工具栏
                this.adjustPalette();
            });
        },
        // 调整左侧工具栏排版
        adjustPalette() {
            try {
                // 获取 bpmn 设计器实例
                const canvas = this.$refs.canvas;
                const djsPalette = canvas.children[0].children[1].children[4];
                const djsPalStyle = {
                    width: "130px",
                    padding: "5px",
                    background: "white",
                    left: "20px",
                    borderRadius: 0
                };
                for (let key in djsPalStyle) {
                    djsPalette.style[key] = djsPalStyle[key];
                }
                const palette = djsPalette.children[0];
                const allGroups = palette.children;
                allGroups[0].style["display"] = "none";
                allGroups[4].style["display"] = "none";
                allGroups[5].style["display"] = "none";
                allGroups[6].style["display"] = "none";
                allGroups[7].style["display"] = "none";
                // 修改控件样式
                for (let gKey in allGroups) {
                    let group = allGroups[gKey];
                    for (let cKey in group.children) {
                        const control = group.children[cKey];
                        const controlStyle = {
                            display: "flex",
                            justifyContent: "flex-start",
                            alignItems: "center",
                            width: "100%",
                            padding: "5px"
                        };
                        if (control.className && control.dataset && control.className.indexOf("entry") !== -1) {
                            const controlProps = this.bpmData.getControl(control.dataset.action);
                            control.innerHTML = `<div style='font-size: 14px;font-weight:500;margin-left:15px;'>${controlProps["title"]}</div>`;
                            for (let csKey in controlStyle) {
                                control.style[csKey] = controlStyle[csKey];
                            }
                        }
                    }
                }
            } catch (e) {
                console.log(e);
            }
        },
    }
}


